<template>
    <div id="main">
         <mt-header fixed :title="selected"></mt-header><br><br>
<van-search
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
  @click="seek()"
/>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="list">
        <van-swipe-item v-for="v in list" :key="v.id">
            <img :src="v.carouselUrl" alt="" class="imgs" @click="swipdetail(v.musicId)">
        </van-swipe-item>
</van-swipe>
         <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="van-list">
            <div class="d1" v-for="(v,index) in arr" :key="index">
           
            <div class="d2"><img :src="arr[index].avaUrl" @click="detail(v.id)" class="listimg"></div>
             <div class="d3"><img src="../assets/name.png">{{v.name}}</div>
            <div><p class="p1"><img src="../assets/flag.png" alt="">{{v.age}}<span class="addcart" @click.prevent="addcart(v)"><img src="../assets/addCart.png" alt="" class="addcart_a"><a href="">加入购物车</a></span></p></div>
        </div>
        </van-list>
    </van-pull-refresh>
    </div>
</template>
<script>
import Vue from 'vue';
import { List } from 'vant';
import url from "../tools/url"
Vue.use(List);
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);

import { Indicator } from 'mint-ui';
export default {
    name:"page",
    data() {
        return {
         arr:[],
         loading:false,
         finished:false,
         selected:"首页",
         pageNo:1,
         isLoading:false,
         list:[],
         value:"",
        }
    },
    methods: {
        //轮播图详情
        swipdetail(id){
            Indicator.open();
            this.$router.push({
                path:"/swipdetail",
                query:{
                    id:id
                }
            })
        },
        //下拉刷新
        onRefresh(){
            var str=`token=${sessionStorage.getItem("token")}&pageNo=${this.pageNo}&pageSize=10`
            this.axios.post(url.GETUSERLIST,str).then(pro=>{
                if(pro.data.code==200){
                      // 加载状态结束
                    this.isLoading = false;
                    this.arr=pro.data.data.list.concat(this.arr);
                    this.pageNo++;
                    if(pro.data.data.list.isLastPage){
                        //如果返回的数据是最后一页，就停止加载
                        this.finished = true;
                    }
                this.arr.forEach((item,index,arr)=>{
                item.num=1;
                item.ischeck=true;
        })
                }else{
                    console.log("错误");
                    this.$router.push("/login")
                }
            })
        },
        //上拉加载
        onLoad() {
            var str=`token=${sessionStorage.getItem("token")}&pageNo=${this.pageNo}&pageSize=10`
            this.axios.post(url.GETUSERLIST,str).then(pro=>{
                if(pro.data.code==200){
                      // 加载状态结束
                    this.loading = false;
                    this.arr=this.arr.concat(pro.data.data.list);
                    this.pageNo++;
                    if(pro.data.data.list.isLastPage){
                        //如果返回的数据是最后一页，就停止加载
                        this.finished = true;
                    }
                }else{
                    console.log("登录超时");
                    this.$router.push("/login")
                }
            this.arr.forEach((item,index,arr)=>{
                item.num=1;
                item.ischeck=true;
        })
        })
        },
//搜索
seek(){
    this.$router.push("/seek").catch(e=>{})
},

//跳转详情页
        detail(id){
            Indicator.open('加载中...');
            this.$router.push({
                path:"/detail",
                query:{
                    id:id,
                }
            }).catch(e=>{})
        },
         addcart(v){
        this.$store.commit("arrChange",v)
    },
    },
   
    computed: {
        
    },
    mounted() {
        var str=`token=${sessionStorage.getItem("token")}`;
        this.axios.post(url.CAROUSEL,str).then((pro)=>{
            this.list=pro.data.data;
        })
    
    },
}
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.d2 img{
    width: 100%;
}
.d1{
    display: inline-block;
    overflow: hidden;
    width: 47%;
    box-shadow: rgb(128, 128, 128) 2px 2px 2px 2px;
    border-radius:5% 5% 5% 5%;
    margin: 1.5% 1.5%;
}
#main{
    margin-bottom: 20%;
}
.p1{
     display: -webkit-box;
             -webkit-box-orient: vertical;
           -webkit-line-clamp: 3;
             overflow: hidden;
            color: red;
            margin-left: 3%;
            vertical-align:middle;
}
.imgs{
    width: 100%;
    height: 30%;
}
.van-list{
    box-shadow: darkgrey 10px 10px 30px 5px ;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.search{
    position: fixed;
    margin-top: 0;
    z-index: 99;
    width: 100%;
    background-color: wheat;
}
.d2{
    overflow: hidden;
}
.d3{
    margin-left: 3%;
}
.listimg{
    width: 10vw;
    transition: all 2s;
     border-radius:5% 5% 0 0%;
}

.listimg:hover{
    transform: scale(1.5);  
}
.addcart{
   vertical-align:middle; /* 居中对齐， */
    font-size:16px;
    margin-left: 19%;
}
</style>